<template>
  <div class="UserSet">
    <el-dialog :title="$t('updateUserTranslate.edit_user')" :visible.sync="showDialog" @close="$emit('update:showUpdate', false)"
               :showUpdate="showUpdate">
      <el-form class="small-space" ref="adjustTypeFrom" label-position="right" label-width="120px">
        <dialog-wrapper>
          <el-form-item :label="$t('updateUserTranslate.userid')">
            <el-input v-model="userInfo.id" disabled></el-input>
          </el-form-item>
          <el-form-item :label="$t('updateUserTranslate.username')">
            <el-input v-model="userInfo.nickname" :placeholder="$t('updateUserTranslate.placeholder')"></el-input>
          </el-form-item>
          <el-form-item :label="$t('updateUserTranslate.companyID')">
            <el-input v-model="userInfo.mch_ids" :placeholder="$t('updateUserTranslate.placeholderCompany')"></el-input>
          </el-form-item>
          <el-form-item :label="$t('updateUserTranslate.user_role')+':'">
            <el-select v-model="userInfo.role">
              <el-option v-if="userInfo.role===0" :label="$t('updateUserTranslate.roles.0')" :value="parseInt(userInfo.role)"></el-option>
              <el-option v-for="(item, key) of roleData" :key="key" :label="$t('updateUserTranslate.' + item)" :value="parseInt(key)"></el-option>              
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="用户权限:">
            <el-select v-model="perm" multiple collapse-tags placeholder="请选择" style="width: 250px">
              <el-option v-for="(perm, key) in permssionArray" :key="key" :label="perm" :value="key">
              </el-option>
            </el-select>
          </el-form-item> -->
        </dialog-wrapper>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="loading" @click="saveUserSet">{{$t('updateUserTranslate.save')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import DialogWrapper from '@/components/DialogWrapper';
import { getUserDetail, saveUserInfo } from '@/api/userdata';
import { getRoleList } from '@/api/role';
import i18n from '@/lang/index';

export default {
  components: { DialogWrapper },
  data() {
    return {
      showDialog: this.showUpdate,
      loading: false,
      userInfo: {},
      roleArray: this.$store.state.user.user_roles,
      roleData: [], 
      perm: []
    };
  },
  props: {
    showUpdate: {
      type: Boolean,
      default: false
    },
    userDetailId: {
      type: Number
    }
  },
  created() {
    this.getUserDetail();
  },
  methods: {
    saveUserSet() {
      this.userInfo.perm = this.perm.join('|');
      saveUserInfo(this.userInfo, this.userDetailId).then(res => {
        if (res.status === 0) {
          this.$message({ message: i18n.t('userTranslate.success'), type: 'success' });
          this.$emit('update:showUpdate', false);
        }
      });
    },
    getUserDetail() {
      getUserDetail(this.userDetailId).then(res => {
        if (res.status === 0) {
          this.userInfo = res.data;
          if (res.data.perm) {
            this.perm = res.data.perm;
          }
        }
      });
      getRoleList().then(res => {
        if (res.status === 0) {
          let roleData = {};
          res.data.list.map(item => {
            roleData[item.id] = item.rolename;
          });
          this.roleData = roleData;
        }
      });
    },
    roleFilter(role, staten) {
      //const roleArray = ['未激活/黑名单用户', '未使用1', '未使用2', '集团财务', '内部财务', '开发者']
      if (role > 0) {        
        let roles = 'userTranslate.roles.' + role;
        if(i18n.t(roles).indexOf('userTranslate.roles') === 0) {               
          return staten[role];
        } else {
        return i18n.t(roles);
        }
      } else {
        return '';
      } 
    }
  },    
  watch: {
    showUpdate() {
      this.showDialog = this.showUpdate;
    }
  }
};

export const zhTransUserEdit = {
  edit_user: '编辑用户',
  userid: '用户ID',
  username: '用户的昵称',
  companyID: '关联的平台ID',  
  placeholderCompany: '被逗号隔开',
  placeholder: '请输入',
  save: '确 定',
  choose: '请选择',
  user_role: '用户角色',
  success: '编辑成功。',
  roles: {
    0: '选择一个角色',
    5: '超级管理员',
    26: '收付組長',
    27: '收款組員',
    28: '付款組員',
    29: '充值提單測試',
    30: '代理充值專員',
    31: '测试商户角色',
    32: '测试'
  },
	//roles
	超级管理员: '超级管理员',
	收付組長: '收付組長',
	收款組員: '收款組員',
	付款組員: '付款組員',
	充值測試: '充值測試',
  代理充值專員: '代理充值專員商',
  商: '商',
  测试: '测试'
};

export const enTransUserEdit = {
  edit_user: 'Edit User',
  userid: 'User ID',
  username: 'Username',
  companyID: 'Company ID',
  placeholder: 'Please enter',
  placeholderCompany: 'Separated by commas',
  save: 'Save',  
  choose: 'Please choose',
  user_role: 'Roles',
  success: 'Succesfully edited!',
  roles: {
    0: '-Select a role-',
    5: 'Super Administrator',
    26: 'Receiving team leader',
    27: 'Collection member',
    28: 'Payment team member',
    29: 'Recharge bill of lading test',
    30: 'Agent recharge commissioner',
    31: 'Test merchant role',
    32: 'test'
  },
  //roles
	超级管理员: 'Super Administrator',
	收付組長: 'Team Leader',
	收款組員: 'Collection member',
	付款組員: 'Payment team member',
	充值測試: 'Recharge test',
  代理充值專員: 'Agent recharge commissioner',
  商: 'Business',
	测试: 'test'
};
</script>
